import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("表单数据收集")

    // 表单数据对象 - 使用QtObject确保属性绑定
    QtObject {
        id: formData
        property string name: ""
        property string gender: ""
        property string city: ""
        property string district: ""
    }

    Grid {
        id: formGrid
        columns: 2
        spacing: 10
        padding: 20
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right

        Text { text: "姓名:" }
        TextField {
            id: nameField
            width: 200
            onTextChanged: formData.name = text
        }

        Text { text: "性别:" }
        ComboBox {
            id: genderCombo
            width: 200
            model: ["男", "女"]
            onCurrentTextChanged: formData.gender = currentText
            // 初始化选择
            Component.onCompleted: currentIndex = 0
        }

        Text { text: "城市:" }
        ComboBox {
            id: cityCombo
            width: 200
            model: ListModel {
                ListElement { text: "北京" }
                ListElement { text: "上海" }
                ListElement { text: "广州" }
            }
            textRole: "text"
            onCurrentTextChanged: {
                formData.city = currentText
                formData.district = "" // 清空区县选择
                districtCombo.currentIndex = -1 // 重置区县选择
            }
            // 初始化选择
            Component.onCompleted: currentIndex = 0
        }

        Text { text: "区县:" }
        ComboBox {
            id: districtCombo
            width: 200
            enabled: cityCombo.currentIndex >= 0
            model: {
                if (cityCombo.currentIndex === 0) return ["朝阳区", "海淀区", "西城区"]
                if (cityCombo.currentIndex === 1) return ["浦东新区", "徐汇区", "静安区"]
                if (cityCombo.currentIndex === 2) return ["天河区", "越秀区", "海珠区"]
                return []
            }
            onCurrentTextChanged: formData.district = currentText
            // 初始化选择
            Component.onCompleted: if (model.length > 0) currentIndex = 0
        }
    }

    Button {
        anchors {
            bottom: resultText.top
            horizontalCenter: parent.horizontalCenter
            margins: 20
        }
        text: "提交表单"
        onClicked: {
            // 创建临时对象确保包含所有最新数据
            var dataToPrint = {
                "name": formData.name,
                "gender": formData.gender,
                "city": formData.city,
                "district": formData.district
            }

            // 打印JSON格式的表单数据
            console.log("表单数据:", JSON.stringify(dataToPrint, null, 2))

            // 显示在界面上
            resultText.text = JSON.stringify(dataToPrint, null, 2)
        }
    }

    Text {
        id: resultText
        text: "提交后将显示JSON格式数据..."
        anchors {
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            margins: 20
        }
        height: 100
    }
}
